<script>
import {ElMessage, uploadProps} from "element-plus";
import {CirclePlus, Search, Edit, Delete, Plus} from "@element-plus/icons-vue";

export default{
  computed: {
    CirclePlus() {
      return CirclePlus
    },
    Search(){
      return Search
    },
    Edit(){
      return Edit
    },
    Delete(){
      return Delete
    }
  },
  components: {
    Plus,
    CirclePlus,
    Search,
    Delete,
    Edit
  },
  data(){
    return{
      dialogUpdateFormVisible:false,
      updateform:{},
      formLabelWidth:'100px',
      dialogAddFormVisible:false,
      addform:{},
      NoticeInfo:{
        type:'',
        status:null
      },
      NoticeData:[],
      fileList:[]   //存储上传的多张图片
    }
  },
  methods:{
  handleRemove(){uploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}},
    handleSuccessUpdate(respond){
      console.log(respond);
      this.updateform.notice_image=respond
    },
    handleSuccess(response) {
      // 上传图片成功后的回调
     console.log(response);
     this.addform.notice_image=response
    },
  onSubmit(){
    console.log(this.NoticeInfo);
    this.LoadNoticeData();
  },
  btnAdd(){
    this.dialogAddFormVisible=true
  },
  btnAddNotice(){
    console.log(this.addform);
    this.$http.post("http://localhost:8080/notice/insert",this.addform).then((res)=>{
      if(res.data===1){
        console.log("添加成功！");
        ElMessage({
          message:'添加成功！',
          type:'success',
        })
        this.LoadNoticeData();
        this.addform={}
        this.dialogAddFormVisible=false
      }else{
        ElMessage({
          message:'添加失败！',
          type:'danger',
        })
        console.log("添加失败！");
      }
    }).catch(function(err){
      console.log(err);
    })
  },
  btnDel(notice_id){
    console.log(notice_id);
    this.$http.get("http://localhost:8080/notice/del/"+notice_id).then((res)=>{
      console.log(res.data);
      if(res.data===1){
        console.log("删除成功！");
        ElMessage({
          message:'删除成功！',
          type:'success',
        })
        this.LoadNoticeData()
      }
      else{
        ElMessage({
          message:'删除失败！',
          type:'warning',
        })
        console.log("删除失败！");
      }
    }).catch(function(err){
      console.log(err);
    })
  },
  cancelEvent(){},
  btnShow(info){
    console.log(info);
    this.updateform=info;
    console.log(info)
    this.dialogUpdateFormVisible=true
  },
  btnUpdateNotice(){
    console.log(this.updateform);
    this.$http.post("http://localhost:8080/notice/update",this.updateform).then((res)=>{
      if(res.data===1){
        console.log("修改成功！");
        ElMessage({
          message:'修改成功！',
          type:'success'
        })
        this.LoadNoticeData();
        this.updateform={}
        this.dialogUpdateFormVisible=false
      }else{
        ElMessage({
          message:'修改失败！',
          type:'success',
        })
        console.log("修改失败！");
      }
    }).catch(function(err){
      console.log(err);
    })
  },
    LoadNoticeData(){
      this.$http.get("http://localhost:8080/notice/query",{params:{
        type:this.NoticeInfo.type,
        status:this.NoticeInfo.status,
        }}).then((res)=>{
        this.NoticeData = res.data
        console.log(this.NoticeData);
      }).catch(function(err){
        console.log(err);
      })
    }
  },
  mounted(){
    this.LoadNoticeData()
  }
}
</script>


<template>
<el-card style="max-width: 100%">
<template #header>
  <div class="card-header">
    <span>
      <h2 class="card-title">公告发布</h2>
    </span>
  </div>
</template>
  <!-- 查询按钮 -->
  <el-form :inline="true" :model="NoticeInfo" class="demo-form-inline">
    <el-form-item label="公告类型">
      <el-select v-model="NoticeInfo.type" placeholder="--请选择--" style="width:120px" clearable>
        <el-option label="网站公告" value="网站公告" />
        <el-option label="活动公告" value="活动公告" />
      </el-select>
    </el-form-item>
    <el-form-item label="发布状态:">
      <el-select v-model="NoticeInfo.status" placeholder="--请选择--" style="width:120px" clearable>
        <el-option label="未审核" value="0" />
        <el-option label="已发布" value="1" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button default type="primary" :icon="Search" @click="onSubmit">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button default type="success" :icon="CirclePlus" @click="btnAdd">新增</el-button>
    </el-form-item>
  </el-form>
  <!-- 显示公告信息 -->
  <el-table :data="NoticeData" stripe style="width: 100%">
    <el-table-column prop="notice_id" label="公告编号" />
    <el-table-column prop="notice_theme" label="公告主题" width="200px"/>
    <el-table-column prop="notice_type" label="公告类型" />
    <el-table-column prop="notice_image" label="相关图片" width="100px">
      <template #default="scope">
        <el-image
            style="width: 70px; height: 70px"
            :src="'http://localhost:8080/image/upload/'+scope.row.notice_image"
            fit="cover"
        />
      </template>
    </el-table-column>
    <el-table-column prop="release_person" label="发布人员" />
    <el-table-column prop="release_time" label="发布时间" width="150px"/>
    <el-table-column prop="notice_status" label="发布状态">
      <template #default="scope">
        {{ scope.row.notice_status === 0 ? "未审核" : "已发布" }}
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="200px">
      <template #default="scope">
        <el-popconfirm confirm-button-text="Yes"
                       cancel-button-text="No"
                       icon-color="#626AEF"
                       title="确定删除吗?"
                       @confirm="btnDel(scope.row.notice_id)"
                       @cancel="cancelEvent">
          <template #reference>
            <el-button default type="danger" :icon="Delete" size="small">删除</el-button>
          </template>
        </el-popconfirm>
        <el-button default type="warning" size="small" :icon="Edit" @click="btnShow(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-card>

  <!-- 新增公告对话框 -->
  <el-dialog v-model="dialogAddFormVisible" width=500px center>
    <div class="center-title">
      <span>新增公告</span>
    </div>
    <br/>
    <el-form :model="addform">
      <el-form-item label="发布人:" :label-width="formLabelWidth">
        <el-input v-model="addform.release_person" autocomplete="off" />
      </el-form-item>
      <el-form-item label="公告主题:" :label-width="formLabelWidth">
        <el-input v-model="addform.notice_theme" autocomplete="off" />
      </el-form-item>
      <el-form-item label="公告类型:" :label-width="formLabelWidth">
        <el-select v-model="addform.notice_type" placeholder="--请选择--">
          <el-option label="网站公告" value="网站公告" />
          <el-option label="活动公告" value="活动公告" />
        </el-select>
      </el-form-item>
      <el-form-item label="公告内容:" :label-width="formLabelWidth">
        <el-input
            v-model="addform.notice_content"
            :rows="5"
            type="textarea"
            maxlength="1000"
            show-word-limit
            placeholder="--限1000字内--"
        />
      </el-form-item>
      <el-form-item label="相关图片:" :label-width="formLabelWidth">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/notice/upload"
            :show-file-list="false"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
        >
          <img v-if="addform.notice_image" :src="'http://localhost:8080/image/upload/'+addform.notice_image" class="avatar"  alt=""/>
          <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button default @click="dialogAddFormVisible = false">取消</el-button>
        <el-button default type="primary" @click="btnAddNotice">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑公告对话框 -->
  <el-dialog v-model="dialogUpdateFormVisible" width=500px center>
    <div class="center-title">
      <span>编辑此公告</span>
    </div>
    <br/>
    <el-form :model="updateform">
      <el-form-item label="发布人:" :label-width="formLabelWidth">
        <el-input v-model="updateform.release_person" autocomplete="off" />
      </el-form-item>
      <el-form-item label="公告主题:" :label-width="formLabelWidth">
        <el-input v-model="updateform.notice_theme" autocomplete="off" />
      </el-form-item>
      <el-form-item label="公告类型:" :label-width="formLabelWidth">
        <el-select v-model="updateform.notice_type">
          <el-option label="网站公告" value="网站公告" />
          <el-option label="活动公告" value="活动公告" />
        </el-select>
      </el-form-item>
      <el-form-item label="公告内容:" :label-width="formLabelWidth">
        <el-input
            v-model="updateform.notice_content"
            :rows="5"
            type="textarea"
            maxlength="1000"
            show-word-limit
            placeholder="--限1000字内--"
        />
      </el-form-item>
      <el-form-item label="相关图片:" :label-width="formLabelWidth">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/notice/upload"
            :show-file-list="false"
            :on-success="handleSuccessUpdate"
        >
          <img v-if="updateform.notice_image" :src="'http://localhost:8080/image/upload/'+updateform.notice_image" class="avatar"  alt=""/>
          <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button default @click="dialogUpdateFormVisible = false">取消</el-button>
        <el-button default type="primary" @click="btnUpdateNotice">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style>
.card-title {
  text-align: center; /* 将标题文本居中对齐 */
}
</style>
<style scoped>
.avatar {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
</style>

<style>
.avatar-uploader{
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  color: #5880b4;
  width: 80px;
  height: 80px;
  text-align: center;
}
</style>